<template>
  <div>
    <v-chart :forceFit="false" height="400" :data="data">
      <v-tooltip :showTitle="true" :crosshairs="tooltipCrosshairs" :itemTpl="tooltipItemTpl" />
      <v-axis />
      <v-point position="height*weight" :size="4" :opacity="0.65" :tooltip="pointTooltip" shape="circle" />
    </v-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      height: 500,
      pointTooltip: ['gender*height*weight', (gender, height, weight) => {
        return {
          name: gender,
          value: height + '(cm), ' + weight + '(kg)'
        }
      }],
      tooltipCrosshairs: { type: 'cross' },
      tooltipItemTpl: `
        <li data-index={index} style="margin-bottom:4px;">
          <span style="background-color:{color};" class="g2-tooltip-marker"></span>
          {name}<br />{value}
        </li>
        `
    }
  },
  created() {
    // console.log($)
    const scatter = require('@/assets/data/scatter.json')
    this.data = scatter
  }
}
</script>
